<template>
  <div
    class="editor"
    v-loading.fullscreen.lock="loading"
    element-loading-text="加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.1)"
  >
    <!-- 头部:logo、菜单栏、用户中心 -->
    <div class="header">
      <editor-header />
    </div>
    <!-- 主体:侧面板、绘图区 -->
    <div class="main">
      <editor-main />
    </div>
    <!-- 底部: 版权、公司信息、备案信息等 -->
    <div class="footer">
      <editor-footer />
    </div>
  </div>
</template>

<script>
import EditorHeader from './header'
import EditorMain from './main'
import EditorFooter from './footer'
import { mapState } from 'vuex'

export default {
  name: 'MisEditor',
  components: {
    EditorHeader,
    EditorMain,
    EditorFooter
  },
  data() {
    return {
      gcTimerId: 0
    }
  },
  computed: {
    ...mapState('editor/diagram', {
      loading: 'loading'
    })
  }
}
</script>

<style lang="scss">
// popper样式(全局影响)
@import './style/popper.scss';
// messagebox dialog样式(全局影响)
// @import './style/dialog.scss';
</style>

<style lang="scss" scoped>
@import './style/variable.scss';

.editor {
  display: flex;
  flex-direction: column;
  height: 100%;
  .header {
    // @extend %menu-bar-height;
    // text-align: center;
    padding: 0;
    // height: 60px !important;
    // flex-grow: 0;
  }
  .main {
    flex-grow: 1;
    padding: 0;
    background-color: $menu-bg-color3;
    // 隐藏滚动条
    overflow: hidden;
  }
  .footer {
    @extend %menu-color;
    // flex-grow: 0;
    height: 24px;
    line-height: 24px;
    max-height: 24px;
    font-size: 12px;
    // text-align: center;
    padding: 0;
  }
  .toolbar-container {
    position: absolute;
    top: 40px;
    left: 500px;
    height: 30px;
    padding: 3px 0;
    width: 300px;
    @extend %toolbar-color;
    z-index: 1;
  }
}
</style>
